<template>
	<view class="coupons">
		<!-- 首页领取优惠券  优惠券页面-->
		<view class="coupons-bg">
			<scroll-view class="bg-scroll" :scroll-y="true" :scroll-top="scrollTop">
				<view class="bg-cover" v-for="(item) in couponsList" :key="item.couponsId">
					<view class="bg-containner">
						<view class="left">
							<view class="title p5">{{item.couponsTitle}}</view>
							<view class="price p5">{{item.couponsDescribe}}</view>
							<view class="timeOut p5">到期时间 ：{{item.deadline}}</view>
						</view>
						<view class="right">
							<view class="right-btn" @click="$emit('getCoupons',item.couponsId,item.getStatus)">
								{{item.getStatus === '1' ? "已领取" :'未领取'}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="bg-close" @click="$emit('close')">
			x
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: "Coupons",
		props: {
			couponsList: {
				type: Array,
				require: true
			}
		},
		data() {
			return {
				scrollTop: 0,
			}
		},
		// 加载token
		computed: {
			...mapGetters(['token'])
		},

	}
</script>

<style scoped>
	.coupons {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.bg-containner {
		display: flex;
		/* justify-content: center;
		align-items: center; */
		margin-left: 140rpx;
	}

	.left {
		display: flex;
		/* padding: 20rpx 0; */
		padding-top: 10rpx;

		flex-direction: column;
	}

	.timeOut {
		font-size: 24rpx;
		color: #c6c0bc;
	}

	.p5 {
		padding-bottom: 10rpx;
	}

	.price {
		color: #e85f39;
		font-size: 28rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: 600;
	}

	.coupons-bg {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 680rpx;
		height: 800rpx;
		background: url('../../../static/images/coupons/youhui.png') no-repeat center;
		background-size: cover;
	}

	.right {
		text-align: center;
		width: 110rpx;
		font-size: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-right: 40rpx;
	}

	.right-btn {
		border-radius: 40rpx;
		padding: 8rpx 5rpx;
		background-color: #ff621a;
		color: #fff;
		cursor: pointer;
	}

	.bg-scroll {
		position: absolute;
		top: 440rpx;
	}

	.bg-close {
		position: absolute;
		bottom: 160rpx;
		font-size: 60rpx;
		color: #fff;
	}

	/deep/ .uni-scroll-view-content {
		height: 320rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		z-index: 2;
	}

	.bg-cover {
		background: url('../../../static/images/coupons/youhui-item.png') no-repeat center;
		background-size: cover;
		margin-bottom: 20rpx;
		width: 500rpx;
		height: 160rpx;
		border-radius: 20rpx;
	}
</style>
